<template>
  <div class="pd20">
    <el-descriptions title="订单信息">
      <el-descriptions-item label="订单编号">{{ editForm.orderCode }}</el-descriptions-item>
      <el-descriptions-item label="兑换码">{{ editForm.exchangeCode }}</el-descriptions-item>
      <el-descriptions-item label="订单状态">{{ editForm.isSend }}</el-descriptions-item>
      <el-descriptions-item label="兑换商品等级">{{ editForm.goodsInfo.goodsRankName }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ editForm.goodsInfo.goodsName }}</el-descriptions-item>
      <el-descriptions-item label="商品图片">
        <el-image
          v-for="url in pictureList"
          :key="url"
          style="height:100px; margin-right:10px;"
          :src="url"
          :preview-src-list="pictureList"
          lazy
        />
      </el-descriptions-item>
      <el-descriptions-item label="商家编码">{{ editForm.goodsInfo.sellerCode }}</el-descriptions-item>
      <el-descriptions-item label="兑换时间">{{ editForm.createTime }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="收货信息" class="mt20">
      <el-descriptions-item label="收件人">{{ editForm.consignee }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ editForm.phone }}</el-descriptions-item>
      <el-descriptions-item label="收件地址">{{ editForm.address }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="物流信息" class="mt20">
      <el-descriptions-item label="物流公司">{{ editForm.logistics.logisticsName }}</el-descriptions-item>
      <el-descriptions-item label="物流单号">{{ editForm.logistics.logisticsNo }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getOrderDetailById } from '@/api/order'

// 发货状态表
const SendMap = {
  1: '未发货',
  2: '已发货',
  3: '已收货'
}

const editForm = {
  orderCode: '',
  exchangeCode: '',
  goodsRankName: '',
  goodsName: '',
  headPicture: [],
  pictures: [],
  sellerCode: [],
  createTine: '',
  orderLogisticsStatus: '',
  consignee: '',
  phone: '',
  detailedAddress: '',
  express: '',
  expressCode: '',
  address: '',
  isSend: '', // 是否发货
  logistics: {
    logisticsName: '',
    logisticsNo: ''
  },
  goodsInfo: {}
}
export default {
  components: {},
  props: {
    selectOrder: {
      type: Array,
      default: function() {
        return []
      }
    },
    goodsId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialog: false,
      editForm,
      pictureList: [],
      headPictureList: []
    }
  },
  watch: {
    goodsId(v) {
      this.getOrderDetailById(v)
    }
  },
  methods: {
    async getOrderDetailById(goodsId) {
      const { data } = await getOrderDetailById(goodsId)
      data.goodsInfo = JSON.parse(data.goodsInfo)
      this.editForm = data
      const pictureList = data.goodsInfo.pictures && data.goodsInfo.pictures.split(',')
      const headPictureList = data.goodsInfo.headPicture && data.goodsInfo.headPicture.split(',')
      this.pictureList = pictureList.concat(headPictureList)
      this.editForm.address = `${this.editForm.province}${this.editForm.city}${this.editForm.district}${this.editForm.detailedAddress}`
      this.editForm.isSend = SendMap[this.editForm.orderLogisticsStatus]
      if (!this.editForm.logistics || !this.editForm.logistics.logisticsNo) {
        this.editForm.logistics = {
          logisticsName: '暂无信息',
          logisticsNo: '暂无信息'
        }
      }
    }
  }
}
</script>
